<template>
  <span>
    <svg
      t="1735455147230"
      class="icon"
      viewBox="0 0 1024 1024"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      p-id="5109"
      :style="styleCpd"
    >
      <path
        d="M989.866667 238.933333A102.4 102.4 0 0 0 887.466667 136.533333h-107.861334v-34.133333A102.4 102.4 0 0 0 677.205333 0h-341.333333a102.4 102.4 0 0 0-102.4 102.4V136.533333H136.533333A102.4 102.4 0 0 0 102.4 335.189333V887.466667a136.533333 136.533333 0 0 0 136.533333 136.533333h546.133334a136.533333 136.533333 0 0 0 136.533333-136.533333V335.189333a102.4 102.4 0 0 0 68.266667-96.256z m-688.128-136.533333a34.133333 34.133333 0 0 1 34.133333-34.133333h341.333333a34.133333 34.133333 0 0 1 34.133334 34.133333V136.533333h-409.6zM853.333333 887.466667a68.266667 68.266667 0 0 1-68.266666 68.266666H238.933333a68.266667 68.266667 0 0 1-68.266666-68.266666V341.333333h682.666666z m34.133334-614.4h-750.933334a34.133333 34.133333 0 0 1 0-68.266667h750.933334a34.133333 34.133333 0 0 1 0 68.266667z"
        p-id="5110"
      ></path>
      <path
        d="M341.333333 836.266667a34.133333 34.133333 0 0 0 34.133334-34.133334v-307.2a34.133333 34.133333 0 0 0-68.266667 0v307.2a34.133333 34.133333 0 0 0 34.133333 34.133334zM512 836.266667a34.133333 34.133333 0 0 0 34.133333-34.133334v-307.2a34.133333 34.133333 0 0 0-68.266666 0v307.2a34.133333 34.133333 0 0 0 34.133333 34.133334zM682.666667 836.266667a34.133333 34.133333 0 0 0 34.133333-34.133334v-307.2a34.133333 34.133333 0 0 0-68.266667 0v307.2a34.133333 34.133333 0 0 0 34.133334 34.133334z"
        p-id="5111"
      ></path>
    </svg>
  </span>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import type { IIconProps } from './type'
const props = withDefaults(defineProps<IIconProps>(), {
  size: 18,
  color: 'rgba(255, 255, 245, 0.86)',
  hoverColor: 'red'
})

// 计算样式
const styleCpd = computed(() => {
  return `fill:${props.color};width:${props.size}px;height:${props.size}px;`
})
</script>

<style scoped>
span {
  display: inline-block;
  box-sizing: border-box;
  padding: 0 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
}

.icon {
  cursor: pointer;
}

.icon:hover {
  opacity: 0.5;
}
</style>
